<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品修改</title>
    <link rel="stylesheet" href="../css/layui.css">
    <script src="../js/layui.js" type="text/javascript"></script>
    <script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .btn{
            width: 100px;
            margin: 0 20px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<script>
    $(document).ready(()=>{
        let goodId;
        let goodSku;
        let goodCreateTime;
        //修改数据的数据回显
        if(sessionStorage.getItem('update_obj')){
            let objstring = sessionStorage.getItem('update_obj');
            let obj = JSON.parse(objstring);
            goodId = obj.goodId;
            goodSku = obj.goodSku;
            goodCreateTime = obj.goodCreateTime;
            $("#goodName").val(obj.goodName);
            $("#goodPrice").val(Number(obj.goodPrice.replace("￥","")));
            $("#goodSaler").val(obj.goodSaler);
            $("#goodType").val(obj.goodType);
            $("#goodState").val(obj.goodState);
            $("#demo1").attr('src','data:image/jpeg;base64,'+obj.imgBase64+'');
        }else{
            layer.msg("操作错误请重试")
        }

        //修改按钮点击事件
        $("#btn").click(()=>{
            let goodName = $("#goodName").val();
            let goodPrice = $("#goodPrice").val();
            let goodSaler = $("#goodSaler").val();
            let goodType = $("#goodType").val();
            let goodState = $("#goodState").val();
            let goodimgPath = localStorage.getItem("imgPath");
            if(goodName === ""){
                alert("商品名称是必填项，岂能为空？");
            }else if(goodPrice === ""){
                alert("商品价格是必填项，岂能为空？");
            }else if(goodSaler === ""){
                alert("商家是必填项，岂能为空？");
            }else if(goodType === ""){
                alert("商品分类是必填项，岂能为空？");
            }else if(goodState === ""){
                alert("商品描述是必填项，岂能为空？");
            }else if(goodimgPath === "" || goodimgPath === null){
                alert("请上传商品图片");
            }else{
                let data = $("#form").serialize() + "&goodImgPath="+ goodimgPath+"&goodId="+goodId+"&goodSku="+goodSku+"&goodCreateTime="+goodCreateTime;
                data = decodeURIComponent(data,true)
                $.ajax({
                    url:'http://127.0.0.1:2021/shopstore/good/updateById',
                    data:data,
                    type:'post',
                    headers: {
                        'token': JSON.parse(localStorage.getItem('token')),
                        'userId': JSON.parse(localStorage.getItem('admin')).userId
                    },
                    async: true,
                    datatype: 'json',
                    success: (resp) =>{
                        if(resp.status){
                            alert(resp.message);
                            sessionStorage.removeItem("update_obj");
                            window.location.href='show_good.html'
                        }else if(resp.status === 403){
                            alert(resp.message);
                            parent.location.href="../login.html"
                        } else{
                            alert(resp.message);
                        }
                    },
                    error: (error) =>{
                        console.log(error)
                    }
                })
            }
        })
    })
</script>
<article class="all" style="padding: 10px">
    <button type="button" class="btn layui-btn layui-btn-normal" onclick="javascript:window.location.href='show_good.html'">取消</button>
    <form class="layui-form" id="form">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="goodName" id="goodName" lay-verify="required" lay-reqtext="商品名称是必填项，岂能为空？" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input type="number" name="goodPrice" id="goodPrice" lay-verify="required" lay-reqtext="商品价格是必填项，岂能为空？" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商家</label>
            <div class="layui-input-block">
                <input type="text" name="goodSaler" id="goodSaler" lay-verify="required" lay-reqtext="商家是必填项，岂能为空？" placeholder="请输入商家" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-block">
                <select name="goodType" id="goodType" lay-filter="aihao">
                    <option value=""></option>
                    <option value="生活常用">生活常用</option>
                    <option value="学习资料" selected="">学习资料</option>
                    <option value="家用电器">家用电器</option>
                    <option value="电子设备">电子设备</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">商品介绍</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" id="goodState" name="goodState"></textarea>
            </div>
        </div>

        <div class="layui-upload">
            <label class="layui-form-label">商品图片</label>
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <div class="layui-upload-list" style="padding-left: 110px;box-sizing: border-box;">
                <img class="layui-upload-img" id="demo1" width="200px" height="100px" alt="图片"/>
                <p id="demoText"></p>
            </div>
            <div style="width: 95px;padding-left: 110px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo" style="height: 5px">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>
        <a name="list-progress"> </a>

        <div class="layui-form-item" style="margin-top: 30px">
            <div class="layui-input-block">
                <button type="button" id="btn" class="layui-btn" >立即提交</button>
            </div>
        </div>
    </form>
</article>
<script>
    layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'http://127.0.0.1:2021/shopstore/goodImgUpload' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
                //上传成功，存储图片路径
                localStorage.setItem("imgPath",res.imgPath);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, index, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
</script>
</body>
</html>